<template>
  <Loading :loading="loading">
    <div class="home-main">
      <!-- 搜索框头 -->
      <div class="home-header">
        <div class="home-header-bg">
          <img :src="headerImg" class="home-header-bg" />
        </div>
        <div class="home-header-list flex-row flex-align-center">
          <div
            class="header-input flex-row flex-align-center"
            @click="$router.push('/searchHistory')"
          >
            <img src="./img/search.png" class="home-header-search-img" />
            <div>请输入保险产品名称</div>
          </div>
          <div class="header-list-right" @click="$router.push('/msg')">
            <van-badge :dot="count !== 0">
              <div class="home-header-ring-img">
                <!-- <img
                  src="./img/ring.png"
                  class="home-header-ring-img"
                  @click="$router.push('/msg')"
                /> -->
              </div>
            </van-badge>
          </div>
        </div>
      </div>
      <div class="home-content">
        <!-- 菜单 -->
        <div class="home-menulist">
          <div
            class="menulist-item"
            v-for="item in menuList"
            :key="item.index"
            :class="item.big ? 'menulist-item-big' : ''"
            @click="handleMenu(item)"
          >
            <div>
              <van-badge
                v-if="item.name === 'productDynamics'"
                :dot="productCount !== 0"
              >
                <img :src="item.img" class="item-img" />
              </van-badge>
              <img v-else :src="item.img" class="item-img" />
            </div>
            <div class="item-label">{{ item.label }}</div>
          </div>
        </div>
        <!-- 榜单头条 -->
        <div>
          <div class="home-headline" @click="$router.push('/record')">
            <div class="headline-left">
              <img src="./img/headline.png" />
            </div>
            <div class="headline-label">
              <van-swipe
                vertical
                stop-propagation
                :show-indicators="false"
                :autoplay="3000"
                class="headline-label-swipe"
              >
                <van-swipe-item v-for="(item, index) in modelList" :key="index">
                  <!-- 上面一条 -->
                  <div class="flex-row flex-align-center">
                    <img
                      v-if="item.rank < 6"
                      class="headline-label-img"
                      :src="imgUrl[index]"
                    />
                    <div v-else>{{ item.rank }}</div>
                    <div class="headline-label-txt">{{ item.label }}</div>
                  </div>
                  <!-- 下面一条 -->
                  <div
                    v-if="index + 1 < modelList.length"
                    class="flex-row flex-align-center headline-label-swipe-item"
                  >
                    <img
                      v-if="modelList[index + 1].rank < 6"
                      class="headline-label-img"
                      :src="imgUrl[index + 1]"
                    />
                    <div v-else>{{ modelList[index + 1].rank }}</div>
                    <div class="headline-label-txt">
                      {{ modelList[index + 1].label }}
                    </div>
                  </div>

                  <div
                    v-if="index + 1 == modelList.length"
                    class="flex-row flex-align-center headline-label-swipe-item"
                  >
                    <img class="headline-label-img" :src="imgUrl[0]" />
                    <div class="headline-label-txt">
                      {{ modelList[0].label }}
                    </div>
                  </div>
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="headline-right">
              <img src="./img/arrow-left.png" />
            </div>
          </div>
        </div>
        <!-- 热销 -->
        <div class="home-hot">
          <!-- <div class="masonry">
            <div
              class="item"
              v-for="(item, index) in productList"
              :key="index"
              @click="judgeProductClick(item)"
            >
              <div class="item_content content-sma">
                <HotItem
                  :class="{ 'home-hot-item-one': index === 0 }"
                  :isHot="item.isHot === 'Y'"
                  :index="index + 1"
                  :productObj="{
                    title: item.productName,
                    desc: item.productAbbrDescription,
                    money: item.startPrice,
                    backgroundUrl: item.backgroundUrl,
                    labelList:
                      index === 0
                        ? item.customLabel.indexOf(',') > -1
                          ? item.customLabel.split(',')
                          : item.customLabel
                        : []
                  }"
                />
              </div>
            </div>
          </div> -->

          <div class="masonry">
            <div
              class="item"
              v-for="(item, index) in productList.slice(0, 3)"
              :key="index"
              @click="judgeProductClick(item)"
            >
              <div class="item_content content-sma">
                <HotItem
                  :class="{ 'home-hot-item-one': index === 0 }"
                  :isHot="item.isHot === 'Y'"
                  :index="index + 1"
                  :productObj="{
                    title: item.productAbbrName,
                    desc: item.productAbbrDescription,
                    money: item.startPrice,
                    backgroundUrl: item.backgroundUrl,
                    labelList:
                      index === 0
                        ? item.customLabel.indexOf(',') > -1
                          ? item.customLabel.split(',')
                          : [item.customLabel]
                        : []
                  }"
                />
                        
              </div>
            </div>
          </div>
          <div class="c-9haqex">
            <div
              class="c-9haqex-item"
              v-for="(item, index) in productList.slice(3)"
              :key="index + 3"
              @click="judgeProductClick(item)"
            >
              <HotItem
                :isHot="item.isHot === 'Y'"
                :index="index + 4"
                :productObj="{
                  title: item.productAbbrName,
                  desc: item.productAbbrDescription,
                  money: item.startPrice,
                  backgroundUrl: item.backgroundUrl,
                  labelList: []
                }"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 公司信息 -->
      <div class="home-company">
        <img src="./img/footer.png" class="home-company-bg" />
      </div>
    </div>
  </Loading>
</template>
<script>
import HotItem from './components/hotItem'
import Loading from '@/components/data-loading'
import API from '@/services/h5/home'
import { configs, env } from '@/config/h5'
import { mapState, mapMutations } from 'vuex'
import judgeProClick from '@/mixin/judgeProClick'
// import wxlogin from '@/mixin/wxlogin'
// import { isWeChatBrowser } from '@/config/h5/index.js'
export default {
  mixins: [judgeProClick],

  components: {
    HotItem,
    Loading
  },
  data() {
    return {
      headerImg: configs[env]['homeImg'],
      search: '', //搜索框
      menuList: [
        {
          img: require('./img/record.png'),
          label: '录单',
          name: 'product',
          active: 'N',
          big: true
        },
        {
          img: require('./img/insure.png'),
          label: '投保',
          name: 'product',
          active: 'Y'
        },
        {
          img: require('./img/good.png'),
          label: '万利优选',
          name: 'productOptimization'
        },
        {
          img: require('./img/product.png'),
          label: '产品动态',
          name: 'productDynamics',
          big: true
        }
      ],
      imgUrl: [
        require('./img/gold.png'),
        require('./img/sliver.png'),
        require('./img/three.png'),
        require('./img/four.png'),
        require('./img/five.png')
      ],
      modelList: [],
      productList: [],
      count: 0,
      productCount: 0,
      loading: false,
      params: null
    }
  },
  computed: {
    ...mapState('account', ['user'])
  },
  created() {
    this.init()
  },
  methods: {
    ...mapMutations('product', ['setProductInfo']),
    handleMenu(item) {
      this.$store.commit('main/setTabActive', item.name)
      this.$router.push({
        path: '/' + item.name,
        query: {
          active: item.active ? item.active : ''
        }
      })
    },
    init() {
      // if (isWeChatBrowser) {
      //   this.getWXCode()
      // }
      this.loading = true
      this.getFirstPage()
      this.getprodListInHome()
      this.getMsg()
    },
    async getFirstPage() {
      let res = await API.getFirstPage()
      let data = res.data
      let result = []
      if (data.code === 1000) {
        data.data.forEach(item => {
          let obj = {
            ...item,
            label: `恭喜${item.branchAbbrName}${item.memberName}成交一单${item.productAbbrName}${item.annualPrem}元`
          }
          result.push(obj)
        })
        this.modelList = result
      } else {
        this.loading = false
      }
    },
    async getprodListInHome() {
      let res = await API.getprodListInHome()
      let data = res.data
      if (data.code === 1000) {
        this.productList = data.data
      } else {
        this.loading = false
      }
    },
    async getMsg() {
      let res = await API.getMsg()
      let data = res.data
      if (data.code === 1000 && data.data) {
        let count = 0
        data.data.map(item => {
          // 产品动态
          if (item.messageType === '04') {
            this.productCount = item.unreadCount
          }
          // 我的消息和平台消息
          if (item.messageType === '01' || item.messageType === '03') {
            count = count + item.unreadCount
          }
        })
        this.count = count
        this.loading = false
      } else {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped lang="less">
/deep/.header-list-right .van-badge--fixed {
  top: 3px;
  right: 3px;
}
/deep/.menulist-item .van-badge--fixed {
  top: 7px;
  right: 7px;
}
.home-main {
  position: relative;
  background-color: #fefefe;
  height: 100%;
  .home-header {
    .home-header-search-img {
      width: 16px;
      height: 17px;
      margin-left: 12px;
      margin-right: 8px;
    }
    .home-header-ring-img {
      width: 18px;
      height: 21px;
      background: url('./img/ring.png') no-repeat;
      background-size: cover;
    }
    .home-header-list {
      width: 375px;
      position: absolute;
      top: 42px;
    }
    .header-input {
      flex: 1;
      margin-left: 14px;
      padding: 2px 0;
      width: 305px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #ccc;
      background-color: #fff;
      border-radius: 17px;
      margin-right: 15px;
    }
    .header-list-right {
      text-align: right;
      margin-right: 21px;
    }
  }
}
.home-header-bg {
  width: 375px;
  height: 275px;
}
.home-content {
  padding: 0 10px;
}
.home-menulist {
  margin-top: 13px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 13px;
  color: #666;
  text-align: center;
  .item-img {
    width: 41px;
    height: 41px;
  }
  .item-label {
    margin-top: 7px;
  }
  // .menulist-item-big {
  //   .item-img {
  //     width: 47px;
  //     height: 47px;
  //     margin-top: -4px;
  //   }
  //   .item-label {
  //     margin-top: 4px;
  //   }
  // }
}
.home-headline {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 10px 0;
  border-radius: 5px;
  margin-top: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 11px;
  color: #666;
  padding: 11px 13px;
  .headline-left {
    margin-right: 13px;
    img {
      width: 32px;
      height: 34px;
    }
  }
  .headline-label {
    z-index: 1;
    &-swipe {
      height: 48px;
      transform: translateZ(0);
      /deep/ .van-swipe__track--vertical .van-swipe-item {
        display: flex;
        flex-direction: column;
        align-content: center;
        line-height: 24px;
      }
    }
    &-img {
      width: 17px;
      height: 14px;
    }
    &-txt {
      width: 245px;
      margin-left: 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-weight: normal;
      color: #666;
    }
  }
  .headline-right {
    flex: 1;
    text-align: right;
    img {
      width: 7px;
      height: 13px;
    }
  }
}
.home-hot {
  margin-top: 13px;
  padding: 0 5px;
  box-sizing: border-box;
  padding-bottom: 10px;
  .margin-top-10 {
    margin-top: 10px;
  }
  .margin-bottom-10 {
    margin-bottom: 10px;
  }
}
.home-company {
  margin-top: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 76px;
  background: #fafafa;
  box-sizing: border-box;
  &-bg {
    width: 231px;
    height: 123px;
  }
}
.masonry {
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari 和 Chrome */
  column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;
  column-gap: 10px;
  z-index: 2;
}
.item {
  margin-bottom: 10px;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.c-9haqex {
  display: flex;
  flex-flow: row wrap;
  &-item {
    margin-bottom: 10px;
    &:nth-child(2n) {
      margin-left: 10px;
    }
  }
}
.home-hot-item-one {
  height: 240px;
}
.home-app-test {
  background: @c-color-primary;
  width: 375px;
  text-align: center;
  color: #fff;
  padding: 15px 0;
  font-size: 14px;
}
</style>
